<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Refresher - Spec</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <style>
    ion-spinner {
      color: #555;
    }
  </style>
  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button default-href="/" text="Mailboxes"></ion-back-button>
          </ion-buttons>
          <ion-title>All Inboxes</ion-title>
          <ion-buttons slot="end">
            <ion-button>Edit</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-refresher id="refresher" slot="fixed">
          <ion-refresher-content></ion-refresher-content>
        </ion-refresher>

        <ion-header collapse="condense">
          <ion-toolbar>
            <ion-title size="large">All Inboxes</ion-title>
          </ion-toolbar>
          <ion-toolbar>
            <ion-searchbar></ion-searchbar>
          </ion-toolbar>
        </ion-header>

        <ion-list id="list"></ion-list>

        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
          <ion-fab-button onclick="toggleHeader()">
            <ion-icon name="settings"></ion-icon>
          </ion-fab-button>
        </ion-fab>
      </ion-content>
    </ion-app>

    <script>
      const toggleHeader = () => {
        const app = document.querySelector('ion-app');
        const header = app.querySelector('ion-header');

        if (header) {
          header.parentNode.removeChild(header);
        } else {
          app.insertAdjacentHTML(
            'afterbegin',
            `
          <ion-header>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button default-href="/" text="Mailboxes"></ion-back-button>
              </ion-buttons>
              <ion-title>All Inboxes</ion-title>
              <ion-buttons slot="end">
                <ion-button>Edit</ion-button>
              </ion-buttons>
            </ion-toolbar>
          </ion-header>
        `
          );
        }
      };

      let items = [];
      for (var i = 0; i < 30; i++) {
        items.push(i + 1);
      }
      const list = document.getElementById('list');
      const refresher = document.getElementById('refresher');

      refresher.addEventListener('ionPull', () => {
        console.log('ionPull');
      });

      refresher.addEventListener('ionStart', () => {
        console.log('ionStart');
      });

      refresher.addEventListener('ionRefresh', async function () {
        console.log('Loading data...');
        const data = await getAsyncData();
        items = items.concat(data);
        refresher.complete();
        render();
        console.log('Done');
      });
      function render() {
        let html = '';
        for (let item of items) {
          html += `<ion-item button>${item}</ion-item>`;
        }
        list.innerHTML = html;
      }
      function getAsyncData() {
        // async return mock data
        return new Promise((resolve) => {
          setTimeout(() => {
            let data = [];
            for (var i = 0; i < 30; i++) {
              data.push(i);
            }
            resolve(data);
          }, 5000);
        });
      }
      render();
    </script>
  </body>
</html>
